/**
 * 企业管理页面组件 - 多租户企业信息的创建和管理界面
 *
 * 开发人员：郭畅
 * 开发时间：2025-11-20 至 2025-11-25
 * 模块职责：提供多租户企业的完整管理功能，包括企业创建、编辑、删除、状态管理等
 *
 * 技术要点：
 * - 多租户企业信息管理界面
 * - 企业创建和编辑表单处理
 * - 企业列表展示和操作功能
 * - 美团品牌风格的企业管理界面
 * - 前后端企业管理接口集成
 *
 * 开发故事：负责企业管理页面的完整前端实现，与后端企业服务深度集成，为系统管理员提供便捷的多租户企业管理工具。
 */
<template>
  <div style="padding:24px;">
    <div style="margin-bottom:12px;display:flex;gap:8px;">
      <el-input v-model="form.name" placeholder="企业名称" style="width:200px"/>
      <el-input v-model="form.contactName" placeholder="联系人" style="width:160px"/>
      <el-input v-model="form.contactPhone" placeholder="联系电话" style="width:160px"/>
      <el-select v-model="form.status" placeholder="状态" style="width:120px">
        <el-option :value="1" label="启用"/>
        <el-option :value="0" label="停用"/>
      </el-select>
      <el-button type="primary" @click="create">新增</el-button>
    </div>
    <el-table :data="list" style="width:100%">
      <el-table-column prop="id" label="#" width="80"/>
      <el-table-column prop="name" label="名称"/>
      <el-table-column prop="contactName" label="联系人"/>
      <el-table-column prop="contactPhone" label="电话"/>
      <el-table-column prop="status" label="状态"/>
      <el-table-column label="操作" width="240">
        <template slot-scope="{row}">
          <el-button size="mini" @click="edit(row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dlg.visible" title="编辑企业">
      <el-form :model="dlg.form">
        <el-form-item label="名称"><el-input v-model="dlg.form.name"/></el-form-item>
        <el-form-item label="联系人"><el-input v-model="dlg.form.contactName"/></el-form-item>
        <el-form-item label="电话"><el-input v-model="dlg.form.contactPhone"/></el-form-item>
        <el-form-item label="状态"><el-select v-model="dlg.form.status"><el-option :value="1" label="启用"/><el-option :value="0" label="停用"/></el-select></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dlg.visible=false">取消</el-button>
        <el-button type="primary" @click="update">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){ return { list: [], form:{ name:'', contactName:'', contactPhone:'', status:1 }, dlg:{ visible:false, form:{} } } },
  async created(){ this.load() },
  methods:{
    async load(){ const { data } = await axios.get('/api/enterprises'); if(data.code===0) this.list=data.data },
    async create(){ const { data } = await axios.post('/api/enterprises', this.form); if(data.code===0){ this.$message.success('已新增'); this.form={ name:'', contactName:'', contactPhone:'', status:1 }; this.load() } },
    edit(row){ this.dlg.form = JSON.parse(JSON.stringify(row)); this.dlg.visible=true },
    async update(){ const { data } = await axios.put(`/api/enterprises/${this.dlg.form.id}`, this.dlg.form); if(data.code===0){ this.$message.success('已保存'); this.dlg.visible=false; this.load() } },
    async remove(row){ await axios.delete(`/api/enterprises/${row.id}`); this.$message.success('已删除'); this.load() }
  }
}
</script>
